<script setup lang="ts">
import { Close, Scan, Eye, EyeOff } from '@vicons/ionicons5'
const { visible } = defineProps<{
  visible: boolean
}>()
const emits = defineEmits(['update:visible'])
const close = () => {
  emits('update:visible', false)
}
const signInData = ref({
  account: '',
  authCode: '',
  password: ''
})

const signInWay = ref({
  title: '验证码登录/注册',
  way: '密码登录',
  passwordState: false,
  tip: '',
  authCodeText: '获取验证码',
  isDisposed: false,
  disposedTime: 60,
  passwordVisible: EyeOff,
  passwordVisibleFlag: false
})

const authCodeCountDown = () => {
  if (signInWay.value.disposedTime <= 0) {
    signInWay.value.isDisposed = false
    signInWay.value.disposedTime = 60
    return
  }
  signInWay.value.isDisposed = true
  setTimeout(() => {
    signInWay.value.disposedTime--
    // if (signInWay.value.disposedTime <= 0) {
    authCodeCountDown()
    // }
  }, 1000)
}
const clickSwitchWay = () => {
  signInWay.value.way = signInWay.value.way === '密码登录' ? '验证码登录' : '密码登录'
  signInWay.value.title = signInWay.value.title === '验证码登录/注册' ? '密码登录' : '验证码登录/注册'
  signInWay.value.passwordState = !signInWay.value.passwordState
}

// 业务
const signIn = () => {
  console.log(signInData.value)
  signInWay.value.tip = 'error'
}
const getAuthCode = () => {
  console.log('获取验证码')
  authCodeCountDown()
  console.log(signInWay.value.disposedTime)
}
</script>

<template>
  <!--添加模态框-->
  <div v-if="visible" class="modal-box">
    <div @clicl.stop class="sign-in">
      <div class="header">
        <span>登录FancyBox畅享盒子更多功能</span>
        <n-icon @click="close" size="24">
          <Close />
        </n-icon>
      </div>
      <n-divider></n-divider>
      <div class="body">
        <div class="body-title">{{ signInWay.title }}</div>
        <div class="account">
          <input v-model="signInData.account" type="text" placeholder="请输入手机号/邮箱" />
        </div>
        <div v-if="!signInWay.passwordState" class="auth-code">
          <input v-model="signInData.authCode" type="text" maxlength="4" placeholder="请输入验证码" />
          <button @click="getAuthCode" :disabled="signInWay.isDisposed">
            {{ signInWay.isDisposed ? `${signInWay.disposedTime}s后重新获取` : '获取验证码' }}
          </button>
        </div>
        <div v-else class="password">
          <n-icon v-if="signInWay.passwordVisibleFlag" @click="signInWay.passwordVisibleFlag = !signInWay.passwordVisibleFlag" :component="Eye" size="24" />
          <n-icon v-else @click="signInWay.passwordVisibleFlag = !signInWay.passwordVisibleFlag" :component="EyeOff" size="24" />
          <input v-model="signInData.password" :type="signInWay.passwordVisibleFlag ? 'text' : 'password'" maxlength="16" placeholder="请输入密码" />
        </div>
        <div class="sign-in-tip">{{ signInWay.tip }}</div>
        <button @click="signIn" v-if="!signInWay.passwordState" class="l-r-btn">登录 / 注册</button>
        <button @click="signIn" v-else class="l-r-btn">登录</button>
        <div class="login-way">
          <div>
            <span>其他登录方式:</span>
            <n-icon-wrapper color="#646464" icon-color="#ffffff" :size="20" :border-radius="9">
              <n-icon :size="14" :component="Scan" />
            </n-icon-wrapper>
          </div>
          <span v-if="!signInWay.passwordState" @click="clickSwitchWay">密码登录</span>
          <span v-else @click="clickSwitchWay">验证码登录</span>
        </div>
        <div class="agreement">注册登录即表示同意 <a>用户协议</a> 和 <a>隐私政策</a></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 模态框 */
.modal-box {
  /* 绝顶定位 相对于当前浏览器 */
  position: absolute;
  width: 100%;
  height: 100%;

  /* 设置为白色背景  前期可以设置为其他颜色  方便观看 */
  background-color: rgb(143 143 143 / 40%);
  top: 0;
  left: 0;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 解决高度塌陷的问题 */
  //overflow: hidden;
  z-index: 2002;

  .sign-in {
    $signInBox: 360px;

    width: $signInBox;
    min-width: $signInBox;
    background-color: #fff;
    border-radius: 2%;
    padding: 16px 24px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-weight: 600;
        font-size: 18px;
      }

      .n-icon {
        cursor: pointer;
      }
    }

    .body {
      position: relative;

      $bodyWidth: $signInBox - 48px;

      width: 100%;

      .phone,
      .auth-code,
      .account,
      .password {
        display: flex;
        flex-direction: row;
        height: 48px;
        margin-bottom: 16px;
        align-items: center;

        input {
          height: 100%;
          width: 100%;
          border: 1px solid $darkLight;
          background-color: $darkLight;
          padding: 2px 8px;
          font-size: 16px;
        }

        div,
        button {
          background-color: $darkLight;
          border: 1px solid $darkLight;
          font-size: 16px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .body-title {
        font-size: 17px;
        margin-bottom: 16px;
      }

      .sign-in-tip {
        color: red;
        font-size: 12px;
        width: 100%;
        text-align: center;
        height: 24px;
      }

      .account,
      .password {
        input {
          border-radius: 4px;
        }

        .n-icon {
          position: absolute;
          left: $bodyWidth - 36px;
          cursor: pointer;
          color: rgb(169 169 169);
        }

        input:focus {
          border: $blueFont 1px solid;
        }
      }

      .password > input {
        padding-right: 48px;
      }

      .auth-code {
        button {
          width: 64%;
          text-align: center;
          cursor: pointer;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          border-left: none;
        }

        input {
          //width: 60%;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          border-right: none;
        }

        input:focus {
          border: $blueFont 1px solid;
          border-right: none;
        }

        input:focus ~ button {
          border: $blueFont 1px solid;
          border-left: none;
        }
      }

      .l-r-btn {
        //margin-top: 16px;
        width: 100%;
        border-radius: 4px;
        height: 48px;
        border: 1px solid $blueLight;
        background-color: $blueLight;
        color: $blueFont;
      }

      .l-r-btn:hover {
        border: $blueHover 1px solid;
        background-color: $blueHover;
      }

      .l-r-btn:active {
        border: $bluePressed 1px solid;
        background-color: $bluePressed;
        color: white;
      }

      .login-way {
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;

        :nth-child(1) {
          display: flex;
          align-items: center;

          .n-icon-wrapper {
            cursor: pointer;
          }
        }

        :nth-child(2) {
          cursor: pointer;
        }

        :nth-child(2):hover {
          color: $blueFont;
        }
      }

      .agreement {
        text-align: center;
        font-size: 12px;
        margin-top: 24px;

        a {
          color: $blueFont;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
